﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="HSMPWeb.Index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>HSMP</title>
    <link href="Css/FullPageScroll.css" rel="stylesheet" type="text/css" />
    <link href="Css/jquery.fullPage.css" rel="stylesheet" type="text/css" />
    <link href="Css/LayoutDesign.css" rel="stylesheet" type="text/css" />
    <script src="JScripts/jssor.slider.mini.js" type="text/javascript"></script>
    <script src="JScripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="JScripts/JScript.min.js" type="text/javascript"></script>
    <script src="JScripts/JScriptUI.min.js" type="text/javascript"></script>
    <script src="JScripts/jquery.fullPage.js" type="text/javascript"></script>
    <script src="JScripts/jquery.fullPage.min.js" type="text/javascript"></script>
    <script src="JScripts/jquery.slimscroll.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#fullpage').fullpage({
                anchors: ['Home', 'OurServices', 'Feedback', 'AboutUs', 'ContactUs'],
                sectionsColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],
                css3: true,
                menu: '#menu',
                scrollingSpeed: 2000,
                scrollOverflow: true,
                easingcss3: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)'
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript">
        jQuery(document).ready(function ($) {

            var options = {
                $FillMode: 2,                                       //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
                $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $AutoPlayInterval: 10000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                $PauseOnHover: 1,                                   //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1

                $ArrowKeyNavigation: true,   			            //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
                $SlideEasing: $JssorEasing$.$EaseOutQuint,          //[Optional] Specifies easing for right to left animation, default value is $JssorEasing$.$EaseOutQuad
                $SlideDuration: 4500,                               //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
                $SlideWidth: 1400,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
                //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
                $SlideSpacing: 0, 					                //[Optional] Space between each slide in pixels, default value is 0
                $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                $ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
                $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
                $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
                $DragOrientation: 1,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

                $BulletNavigatorOptions: {                          //[Optional] Options to specify and enable navigator or not
                    $Class: $JssorBulletNavigator$,                 //[Required] Class to create navigator instance
                    $ChanceToShow: 3,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 1,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                    $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                    $SpacingX: 8,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                    $SpacingY: 8,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                    $Orientation: 1,                                //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                    $Scale: false                                   //Scales bullets navigator or not while slider scale
                },

                $ArrowNavigatorOptions: {                           //[Optional] Options to specify and enable arrow navigator or not
                    $Class: $JssorArrowNavigator$,                  //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: 1,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
                }
            };

            //Make the element 'slider1_container' visible before initialize jssor slider.
            $("#slider1_container").css("display", "block");
            var jssor_slider1 = new $JssorSlider$("slider1_container", options);

            $("#slider1_containerTestimonials").css("display", "block");
            var jssor_slider1 = new $JssorSlider$("slider1_containerTestimonials", options);

            $("#slider1_containerFeedback").css("display", "block");
            var jssor_slider1 = new $JssorSlider$("slider1_containerFeedback", options);

            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizes
            function ScaleSlider() {
                var bodyWidth = document.body.clientWidth;
                if (bodyWidth)
                    jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1400));
                else
                    window.setTimeout(ScaleSlider, 30);
            }
            ScaleSlider();

            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
            //responsive code end
        });
    </script>
    <div id="header">
        <div id="DivLoginSocialMedia" style="height:30px; margin: 0px; background: #869d1a">
        <div id="DivLogin">
                <a href="../MySocietyPortalPages/Login.aspx" id="Login" style="float: right; margin: 0px 35px 0 0; color: #FFF; font-size: 14px;
                    outline: none; cursor: pointer">Login | Register</a>
            </div>
            <div id="DivSocialMedia" style="margin: 0px 0 0 135px">
                <table>
                    <tr>
                        <td>
                           <a id="Facebook" href='#'> <img src="../ImagesGallery/SocialMediaImages/Facebook.jpg" class='SocialMedia' title='Facebook'/></a>
                        </td>
                        <td>
                           <a id="Twitter" href='#'> <img src="../ImagesGallery/SocialMediaImages/Twitter.jpg" class='SocialMedia' title='Twitter'/></a>
                        </td>
                        <td>
                            <a id="LinkedIn" href='#'><img src="../ImagesGallery/SocialMediaImages/LinkedIn.jpg" class='SocialMedia' title='LinkedIn'/></a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id='DivSearch' style="float: right; margin-right: 30px">
            <input id="Text1" type="text" runat="server" style="width: 300px; height: 15px; margin: 18px 0 0 50px;
                padding: 5px; border-radius: 30px 0 0 30px; outline: #3B67B2; border: 2px solid #3B67B2" />
            <button type="button" style="height: 29px; width: 35px; margin-left: -12px; border-radius: 0 30px 30px 0;
                outline: #3B67B2; border: 2px solid #3B67B2; border-left: none; background: #FFF;
                color: #3B67B2; cursor: pointer">
                Q</button>
        </div>
        <div id="Logo" style="margin: 2px 30px 0 35px;float:left">
            <a href="../Index.aspx" style="cursor: pointer">
                <img src="ImagesGallery/MySocietyPortalLogo.jpg" /></a>
        </div>
        <div id="NavMenu" style="float: left">
            <ul id="menu">
                <li data-menuanchor="Home"><a href="#Home">Home</a></li>
                <li data-menuanchor="OurServices"><a href="#OurServices">Our Services</a></li>
                <li data-menuanchor="Feedback"><a href="#Feedback">Feedback</a></li>
                <li data-menuanchor="AboutUs"><a href="#AboutUs">About Us</a></li>
                <li data-menuanchor="ContactUs"><a href="#ContactUs">Contact Us</a></li>
            </ul>
        </div>
    </div>
    <div id="fullpage" style="margin-top: 85px">
        <div class="section ">
            <div id="slider1_container" style="display: block; position: relative; margin: 0 auto;
                top: 0px; left: 0px; height: 650px; overflow: hidden;">
                <div u="loading" style="position: absolute; top: 0px; left: 0px;">
                    <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block;
                        top: 0px; left: 0px; width: 100%; height: 100%;">
                    </div>
                    <div style="position: absolute; display: block; background: url(../ImagesGallery/HSMP-Loading.gif) no-repeat center center;
                        top: 0px; left: 0px; width: 100%; height: 100%;">
                    </div>
                </div>
                <!-- Slides Container -->
                <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1400px;
                    height: 650px; overflow: hidden">
                    <div id="DivWhatWeDo">
                        <div id="DivWhatWeDoContents"  style="float:left; width: 550px; text-align: left;margin: 75px 0px 0 210px">
                            <p style="margin: 0px 0 10px 0px; font-size: 48px; font-family: Arial Rounded MT Bold;
                                font-weight: 500; color: #FF9900">
                                What We Do</p>
                            <p style="width: 500px; margin: 0px 0 5px 0px; font-size: 24px; font-family: Segoe UI;
                                font-weight: 700; color: #000">
                                We are creating small generic functionalities in the form of service, API and components,
                                which can be used by others in their applications to incorporate these functionalities.
                                <br />
                                <br />
                                <button type="button" class='btnReadmoreGreenButton' runat="server" onserverclick="btnWhatWeDo_Click">
                                    Readmore
                                </button>
                            </p>
                        </div>
                    </div>
                    <div id="DivJoinOurCommunity">
                        <div id="DivJoinOurCommunityDescription" style="float: right; width: 550px; text-align: left;
                            margin: 75px 150px 0 0">
                            <p style="margin: 0px 0 10px 0px; font-size: 48px; font-family: Arial Rounded MT Bold;
                                font-weight: 500; color: #FF9900">
                                Join our community</p>
                            <p style="width: 500px; margin: 0px 0 5px 0px; font-size: 24px; font-family: Segoe UI;
                                font-weight: 700; color: #000">
                                We are looking for developers to help us in coding. Basic knowledge of .Net and
                                C# language will be an added advantage. Even if you don’t know, no problem, we will
                                teach you.
                                <br />
                                <br />
                                <button type="button" class='btnReadmoreGreenButton' runat="server" onserverclick="btnJoinCommunity_Click">
                                    Readmore
                                </button>
                            </p>
                        </div>
                    </div>
                    <div id="DivHowItWork">
                        <div style="margin: 100px 0 0 0px; padding-left:15px">
                            <p style="margin: 75px 0 10px 40px; font-size: 48px; font-family: Arial Rounded MT Bold;
                                font-weight: 500; color: #FF9900">
                                How It Works
                            </p>
                            <p style="width: 500px; margin: 0px 0 5px 40px; font-size: 24px; font-family: Segoe UI;
                                font-weight: 700; color: #fff">
                                To use our utilities you need to register. Once you login as registered user you
                                will get access to all our products. Based on the product, we offer following ways
                                to use our products:
                                <br />
                                <br />
                                 <button id="Button1" type="button" class='btnReadmoreGreenButton' runat="server" onserverclick="btnHowItWorks_Click">
                                    Readmore
                                </button>
                            </p>
                        </div>
                    </div>
                </div>
                <!-- Arrow Left -->
                <span u="arrowleft" class="jssora11l" style="top: 250px; left: 30px;"></span>
                <!-- Arrow Right -->
                <span u="arrowright" class="jssora11r" style="top: 250px; right: 60px;"></span>
            </div>
            <!-- Jssor Slider End -->
        </div>
        <!--------------------------------Start Our Services-------------------------->
        <div class="section">
            <div class="intro">
                <div id="DivOurServices" style="width: 100%; margin: auto; text-align: left; margin-bottom: 75px">
                    <table style="width: 1024px; margin: auto">
                        <tr>
                            <td>
                                <img src="ImagesGallery/coming-soon.png" />
                            </td>
                            <td>
                                <a style="font-size: 24px">This Page will be live very soon !</a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="DivTestimonials" style="border: 1px solid #555">
                    <h1 style="padding: 5px 0 10px 175px">
                        Testimonials</h1>
                    <!-- Slides Container -->
                    <div id="slider1_containerTestimonials" style="display: block; position: relative;
                        margin: 0 auto; top: 0px; margin-left: 75px; height: 125px; overflow: hidden;">
                        <!-- Slides Container -->
                        <div u="slides" style="cursor: move; position: relative; left: 0px; top: 0px; width: 1400px;
                            height: 115px; overflow: hidden;">
                            <div>
                                <table>
                                    <tr>
                                        <td valign="middle">
                                            <img src="ImagesGallery/Img001.jpg" style="width: 100px; height: 100px; border-radius: 100px;
                                                border: 1px solid #333;" />
                                        </td>
                                        <td>
                                            <div style="width: 700px; font-size: 18px; text-align: justify; padding-left: 10px">
                                                "I have seen a complete and different approach on design by ThemeFuse and that impressed
                                                me a lot. I am featuring themes and templates on my website and I am sure my users
                                                love them too."
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div>
                                <table>
                                    <tr>
                                        <td valign="middle">
                                            <img src="ImagesGallery/Img01.jpg" style="width: 100px; height: 100px; border-radius: 100px;
                                                border: 1px solid #333;" />
                                        </td>
                                        <td>
                                            <div style="width: 700px; font-size: 18px; text-align: justify; padding-left: 10px">
                                                "My experience with ThemeFuse is absolutely positive. The themes are beautifully
                                                designed and well documented. ThemeFuse provides quick and competent support. I
                                                look forward to more beautiful themes."
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div style="width: 960px; margin: auto">
                                <table>
                                    <tr>
                                        <td valign="middle">
                                            <img src="ImagesGallery/Img03.jpg" style="width: 100px; height: 100px; border-radius: 100px;
                                                border: 1px solid #333;" />
                                        </td>
                                        <td>
                                            <div style="width: 700px; font-size: 18px; text-align: justify; padding-left: 10px">
                                                "We've joined ThemeFuse's affiliate program since they launched years ago, and we're
                                                proud to be their affiliate! High-quality and unique WP themes which are converting
                                                superbly, and their payouts come in like clockwork!"
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--------------------------------Start Feedback Section-------------------------->
        <div class="section">
            <div class="intro">
                <div id="slider1_containerFeedback" style="display: block; position: relative; margin: 0 auto;
                top: 0px; left: 0px; height: 650px; overflow: hidden;">
                <div u="loading" style="position: absolute; top: 0px; left: 0px;">
                    <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block;
                        top: 0px; left: 0px; width: 100%; height: 100%;">
                    </div>
                    <div style="position: absolute; display: block; background: url(../ImagesGallery/HSMP-Loading.gif) no-repeat center center;
                        top: 0px; left: 0px; width: 100%; height: 100%;">
                    </div>
                </div>
                    <!-- Slides Container -->
                    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1400px;
                        height: 650px; overflow: hidden">
                        <div id="DivFeedbackImg01">
                            <div style="text-align: right; margin: 420px 375px 0 0">
                                <button type="button" class='btnSharefeedback' runat="server" onserverclick="btnFeedback_Click">
                                     Click here to Share Your Feedback
                                </button>
                            </div>
                        </div>
                        <div id="DivFeedbackImg02">
                            <div style="text-align: left; margin: 515px 0px 0px 75px">
                                <button type="button" class='btnSharefeedback' runat="server" onserverclick="btnFeedback_Click">
                                    Click here to Share Your Feedback
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section">
            <div class="intro">
                4
            </div>
        </div>
        <div class="section">
            <div class="intro">
                5
            </div>
        </div>
    </div>
    </form>
</body>
</html>
